<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.san_shang{
			width:0px;
			height: 0px;
			border-style:solid;
			border-width:20px  20px 0 20px;
			border-color: #c53336  transparent transparent transparent
		}
		.san_you{
			width:0px;
			height: 0px;
			border-style:solid;
			border-width:20px  20px  20px 0;
			border-color:   transparent  #c53336 transparent transparent
		}
		.san_xia{
			width:0px;
			height: 0px;
			border-style:solid;
			border-width:0 20px  20px  20px ;
			border-color:   transparent   transparent  #c53336  transparent
		}/*上右下左*/

		.san_zuo{
			width:0px;
			height: 0px;
			border-style:solid;
			border-width: 20px  0px  20px  20px  ;
			border-color:   transparent   transparent    transparent #c53336
		}
		.triangle-topleft { width: 0; height: 0; border-top: 100px solid red;  border-right: 100px solid transparent; }
		.triangle-topright { width: 0; height: 0; border-top: 100px solid red;  border-left: 100px solid transparent;}
		.triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red;  border-right: 100px solid transparent; }
		.triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red;  border-left: 100px solid transparent; }
		/*梯形*/
		.pentagon { 
			margin-top:30px;
		position:relative;
	width:54px;
	border-width:50px 18px 0;
	border-style:solid;
	border-color:red transparent;
}
#pentagon:before {
	content:"";
	position:absolute;
	height:0;
	width:0;
	top:-85px;
	left:-18px;
	border-width:0 45px 35px;
	border-style:solid;
	border-color:transparent transparent red;     
}   
		
	</style>
</head>
<body>
<div class="san_shang">	
</div>
<div class="san_you">	
</div>
<div class="san_xia">	
</div>
<div class="san_zuo">	
</div>
<div class="triangle-topleft"></div>
<div class="triangle-topright"></div>
<div class="triangle-bottomleft"></div>
<div class="triangle-bottomright"></div>
<div class="pentagon"></div>
</body>
</html>